<template>
  <div>
    <a-modal
      v-model="visible"
      centered
      :title="false"
      :footer="null"
      width="50vw"
      @cancel="close"
      class="image-preview"
    >
      <a-carousel arrows dots-class="slick-dots slick-thumb" ref="varousel">
        <div slot="prevArrow" class="custom-slick-arrow" style="left: 25px;">
          <a-icon type="left-circle" />
        </div>
        <div slot="nextArrow" class="custom-slick-arrow" style="right: 25px;">
          <a-icon type="right-circle" />
        </div>
        <a slot="customPaging" slot-scope="props">
          <img :src="getImgUrl(props.i)" class="dots-imgs" />
        </a>
        <div v-for="(item,index) in imgList" :key="index" class="carousel-imgs">
          <img :src="item" />
        </div>
      </a-carousel>
    </a-modal>
  </div>
</template>
<script>
export default {
  props: {
    visibleImgs: {
      type: Boolean,
      default: false
    },
    imgList: {
      type: Array,
      default: null
    },
    goToIndex: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      visible: false
    }
  },
  watch: {
    visibleImgs (value, oldvalue) {
      this.visible = value
      if (value) {
        setTimeout(() => {
        this.$refs.varousel.goTo(this.goToIndex)
      }, 200)
      }
    }
  },
  methods: {
    // 查看大图
    getImgUrl (i) {
      return this.imgList[i]
    },
    // 关闭弹窗
    close () {
      this.$emit('closeBig', false)
    }
  }
}
</script>
<style lang="less" scoped>
.ant-carousel{
  .carousel-imgs{
    height: 75vh;
    overflow: hidden;
    img{
      height: 90%;
      object-fit: scale-down;
      margin: 0 auto;
    }
  }
  .dots-imgs{
    width: 50px;
    height: 50px;
    padding: 5px;
    background: #fff;

  }
  /deep/
  .slick-next::before{
    content:''
  }
  .slick-prev::before{
    content: '';
  }
  .custom-slick-arrow {
    width: 50px;
    height: 50px;
    font-size: 50px;
    color: #fff;
    // color: rgb(116, 116, 116);
    background-color: transparent;
    opacity: 1;
    z-index: 2;
    position: fixed;
  }
  /deep/ .slick-dots-bottom{
    bottom: 50px;
    li{
      margin: 0 5px;
      border: 2px solid #cdcdcd;
    }
    .slick-active{
      border: 2px solid #1890ff;
    }
  }
}
.image-preview{
  /deep/ .ant-modal{
    // height:100vh;
    .ant-modal-content{
      height: 80vh;
      .ant-modal-close-x{
        font-size: 30px;
        color: #fff;
        width: 60px;
        height: 60px;
        position: fixed;
        top: 0;
        right: 0;
      }
    }
  }
  /deep/ .ant-modal-content{
    background: transparent;
    box-shadow: none;
  }

}
</style>
